<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
  		<title>Welcome to Design Zone......</title>
        <link rel="stylesheet" type="text/css" href="../../scripts/ext/resources/css/ext-all.css" />
        <link rel="stylesheet" type="text/css" href="../../styles/dzbase.css" />
        <script type="text/javascript" src="../../scripts/ext/adapter/ext-base.js">
        </script>
        <script type="text/javascript" src="../../scripts/ext/ext-all.js">
        </script>
		
		<script type="text/javascript" src="../../scripts/menu/EditableItem.js"></script>
		<script type="text/javascript" src="../../scripts/menu/RangeMenu.js"></script>
		<script type="text/javascript" src="../../scripts/grid/GridFilters.js"></script>
		<script type="text/javascript" src="../../scripts/grid/filter/Filter.js"></script>
		<script type="text/javascript" src="../../scripts/grid/filter/StringFilter.js"></script>
		<script type="text/javascript" src="../../scripts/grid/filter/ListFilter.js"></script>
		<script type="text/javascript" src="../../scripts/grid/RowExpander.js">
        </script>
        <script type="text/javascript" src="../../scripts/i18nMessage.js">
        </script>
        <script type="text/javascript" src="../../scripts/utils.js">
        </script>
		
        <script type="text/javascript">
        var stockMessage = new i18nMessage('../../servlet/I18nMessageServlet?keyPrefix=ui.stock');
        var abMessage = new i18nMessage('../../servlet/I18nMessageServlet?keyPrefix=ui.accessorybutton');
    	var colorMessage = new i18nMessage('../../servlet/I18nMessageServlet?keyPrefix=ui.pantonecolor');
		var fcMessage = new i18nMessage('../../servlet/I18nMessageServlet?keyPrefix=ui.francecustomer');
		var fMessage = new i18nMessage('../../servlet/I18nMessageServlet?keyPrefix=ui.factory');
        var message = new i18nMessage('../../servlet/I18nMessageServlet?keyPrefix=message');
		var ctMaterialType = new i18nMessage('../../servlet/CodeTableServlet?name=CtMaterialType');
		var ctShape = new i18nMessage('../../servlet/CodeTableServlet?name=CtShape');
		var ctYesno = new i18nMessage('../../servlet/CodeTableServlet?name=CtYesno');
		var ctSupplyType = new i18nMessage('../../servlet/CodeTableServlet?name=CtSupplyType');
		
		var store;
        var grid;
        
        var deleteCallback = function(btn){
            if (btn == 'yes') {
                Ext.Ajax.request({
                    url: '../../servlet/BiAccessoryButtonServlet?action=2&id=' + deleteId,
                    success: function(o){
                        if (o.responseText == 'success') {
                            store.reload();
                            messageTip.msg(message.get('message.tip'), message.get('message.delete.successful'));
                        }
                        else {
                            messageTip.msg(message.get('message.tip'), message.get('message.delete.unsuccessful'));
                        }
                    },
                    failure: function(o){
                        messageTip.msg(message.get('message.tip'), message.get('message.delete.failure'));
                    },
                    params: {
                        foo: 'bar'
                    }
                });
            }
        }
		
		Ext.onReady(function(){
            
            store = new Ext.data.Store({
                url: '../../servlet/StockServlet?action=20',
                
                reader: new Ext.data.XmlReader({
                    record: 'item',
                    id: 'id',
                    totalRecords: 'itemTotal'
                }, [ 
                'index', 'reference', 'measure','ctShape', 'ctMaterialType', 'ctSupplyType', 'comment', 'photo1Name','photo2Name','photo3Name', 'holeQuantity','customerReference','factoryReference', 'customerColor', 'factoryColor', 
                'inStock','onTheWayStock','bookedStock','outStock','stock',{
				 	name: 'biFranceCustomer.name',
				 	mapping: 'customerName'
				 }, {
				 	name: 'biFranceCustomer.department',
				 	mapping: 'customerDepartment'
				 }, {
				 	name: 'biFactory.name',
				 	mapping: 'factoryName'
				 },'id']),
                
                remoteSort: true
            });
		
			store.setDefaultSort('id', 'desc');
			
			var filters = new Ext.grid.GridFilters({
				  filters:[
				    {type: 'string',  dataIndex: 'reference'},{
					      type: 'string',  
					      dataIndex: 'measure'
				    },{
					      type: 'list',  
					      dataIndex: 'ctMaterialType', 
					      options: ctMaterialType.getCtArray()
				    },{
					      type: 'list',  
					      dataIndex: 'ctShape', 
					      options: ctShape.getCtArray()
				    },{
					      type: 'list',  
					      dataIndex: 'ctSupplyType', 
					      options: ctSupplyType.getCtArray()
				    },
					{type: 'string', dataIndex: 'biFranceCustomer.name'},
					{type: 'string', dataIndex: 'biFranceCustomer.department'},
					{type: 'string', dataIndex: 'biFactory.name'},
					{type: 'string', dataIndex: 'customerColor'},
					{type: 'string', dataIndex: 'factoryColor'},
					{type: 'string', dataIndex: 'customerReference'},
					{type: 'string', dataIndex: 'factoryReference'}
			]});
			
			var expander = new Ext.grid.RowExpander({
		        tpl : new Ext.XTemplate(
		        	'<p><b>' + message.get('message.edit.materialtype') + ':</b>&nbsp;&nbsp;{ctMaterialType}&nbsp;&nbsp;&nbsp;&nbsp;<b>' + abMessage.get('ui.accessorybutton.shape') + ':</b>&nbsp;&nbsp;{ctShape}&nbsp;&nbsp;&nbsp;&nbsp;<b>' + abMessage.get('ui.accessorybutton.hole') + ':</b>&nbsp;&nbsp;{holeQuantity}&nbsp;&nbsp;&nbsp;&nbsp;<b>' + abMessage.get('ui.accessorybutton.measure') + ':</b>&nbsp;&nbsp;{measure}</p><br/> ',
					'<p><img src="../../_temp/{photo1Name}" width="150px"/> &nbsp;&nbsp;&nbsp;&nbsp;<img src="../../_temp/{photo2Name}" width="150px"/>',
					'&nbsp;&nbsp;&nbsp;&nbsp;<img src="../../_temp/{photo3Name}" width="150px"/></p><br/>',
					'<br/><br/><p><b>' + message.get('message.edit.comment') + ':</b> {comment}</p><br/>'
		        )
		    });
		
			grid = new Ext.grid.GridPanel({
                title: stockMessage.get('ui.stock.buttonstock'),
                store: store,
				stripeRows: true,
				plugins: [filters,expander],
                height: 560,
                columns: [expander, {
                    header: message.get('message.list.id'),
                    width: 50,
                    dataIndex: 'index',
                    sortable: false
                }, {
                    header: message.get('message.edit.reference'),
                    dataIndex: 'reference',
                    sortable: true
                },{
                    header: fcMessage.get('ui.francecustomer.name'),
                    dataIndex: 'biFranceCustomer.name',
                    sortable: true
                },{
                    header: fcMessage.get('ui.francecustomer.department'),
                    dataIndex: 'biFranceCustomer.department',
                    sortable: true
                }, {
                    header: message.get('message.edit.customerreference'),
                    dataIndex: 'customerReference',
                    sortable: true
                }, {
                    header: colorMessage.get('ui.pantonecolor.customercolor'),
                    dataIndex: 'customerColor',
                    sortable: true
                },{
                    header: fMessage.get('ui.factory.name'),
                    dataIndex: 'biFactory.name',
                    sortable: true
                }, {
                    header: message.get('message.edit.factoryreference'),
                    dataIndex: 'factoryReference',
                    sortable: true
                }, {
                    header: colorMessage.get('ui.pantonecolor.factorycolor'),
                    dataIndex: 'factoryColor',
                    sortable: true
                },{
                    header: message.get('message.edit.buyer'),
                    dataIndex: 'ctSupplyType',
                    sortable: true
                },{
                    header: stockMessage.get('ui.stock.instock'),
                    dataIndex: 'inStock',
                    sortable: true,
                    align: 'right',
                    renderer: renderStork
                },{
                    header: stockMessage.get('ui.stock.onthewaystock'),
                    dataIndex: 'onTheWayStock',
                    sortable: true,
                    align: 'right',
                    renderer: renderStork
                },{
                    header: stockMessage.get('ui.stock.bookedstock'),
                    dataIndex: 'bookedStock',
                    sortable: true,
                    align: 'right',
                    renderer: renderStork
                },{
                    header: stockMessage.get('ui.stock.outstock'),
                    dataIndex: 'outStock',
                    sortable: true,
                    align: 'right',
                    renderer: renderStork
                },{
                    header: message.get('message.edit.stock'),
                    dataIndex: 'stock',
                    align: 'right',
                    renderer: renderStork
                },{
                    header: message.get('message.edit.adjuststock'),
                    dataIndex: 'id',
                    sortable: false,
                    renderer: function(value, p, record){
                		return String.format('<a href="accessory_button_stock_inout_edit.html?id={0}&startPage={1}" target="_self"><img src="../../images/icons/lorry.png" title="' + message.get('message.edit.adjuststock') + '" /></a>', record.data.id, Math.floor((record.data.index - 1) / 20) + 1);
                	}
                }],
                viewConfig: {
                    forceFit: true
                },
                loadMask: true,
                renderTo: 'biAccessoryButton',
                bbar: new Ext.PagingToolbar({
                    pageSize: 20,
                    store: store,
                    displayInfo: true
                })
            });
            
            var startPage = getPrarmeterValue(window.location, 'startPage');
            var start;
            if (startPage == null || startPage == '') {
                start = 0;
            }
            else {
                start = (startPage - 1) * 20;
            }
            store.load({
                params: {
                    start: start,
                    limit: 20
                }
            });
			
		});
		var renderStork = function(value, p, record){
			if(!value){
           		value = 0;
           	}
           	return render0D(value);
		}
    	</script>
</head>
<body>
	<div id="biAccessoryButton"></div>
</body>
</html>